import React from 'react';
import { useDispatch } from 'react-redux';
import { updataText } from '../store/module/listSlice';

function Dtext(props: any) {
    const dispatch = useDispatch();
    const { propLable, style, preView } = props;

    const handleInput = (e: any) => {
        const inpvalue = e.target.innerHTML;
        dispatch(updataText({ propLable: inpvalue }));
    };

    return (
        <div
            draggable
            contentEditable="true"
            onBlur={handleInput}
            className="v-text"
            style={preView ? { ...style, whiteSpace: "pre-wrap" } : {}}
            dangerouslySetInnerHTML={{ __html: propLable }} // 使用危险设置
            // dangerouslySetInnerHTML 允许你将一个字符串作为 HTML 内容插入到组件的 DOM 中。这对于需要动态生成 HTML 内容的场景非常有用，比如从服务器获取的富文本内容。
        />
    );
}

export default Dtext;
